<template>
  <div class="approver">
    <div class="butList">
      <div>审批人登记</div>
      <div class="add" @click="addHander('add')"><span>+</span> 创 建 </div>
    </div>
    <div class="approval-card">
      <el-table
        ref="tableObj"
        v-loading="loading"
        row-key="id"
        :data="list"
        style="width: 100%"
        border
        lazy
        :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
        @row-click="clickRow"
      >
        <el-table-column label="名称" prop="name" />
        <el-table-column align="center" label="类型" prop="type" width="100px">
          <template slot-scope="scope">
            {{ scope.row.type === 1 ? 'PMIS' : '其他' }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="ID" prop="id" />
        <el-table-column width="180" align="center" label="操作" fixed="right">
          <template slot-scope="scope">
            <!-- 跳到审批流程的详情接口 -->
            <el-button size="small" type="text" @click="editRow(scope.row)">编辑</el-button>
            <el-button size="small" type="text" @click="creatRow(scope.row)">创建</el-button>
            <el-button size="small" type="text" @click="deleteRow(scope.row)">删除</el-button>
            <el-button size="small" type="text" @click="toApprovalDetail(scope.row)">配置</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <add-approver ref="AddApprover" @updataList="updataList" />
  </div>
</template>

<script>
import { getProcessList } from '@/api/approval'
import AddApprover from './components/addApprover'
export default {
  name: 'Approver',
  components: {
    AddApprover
  },
  data() {
    return {
      loading: false,
      list: []
    }
  },
  created() {
    this.getProcessList()
  },
  methods: {
    clickRow(row) {
      this.$refs.tableObj.toggleRowExpansion(row)
    },
    async getProcessList() {
      this.loading = true
      const res = await getProcessList()
      this.list = res
      this.loading = false
    },
    updataList() { this.getProcessList() },
    deleteRow(_row) {
      this.$refs.AddApprover.delHander(_row)
    },
    editRow(_row) {
      this.$refs.AddApprover.editerHander(_row)
    },
    addHander() {
      this.$refs.AddApprover.addHander()
    },
    creatRow(row) {
      this.$refs.AddApprover.creatHander(row)
    },
    // 跳到流程设计的详情页
    toApprovalDetail(row) {
      this.$router.push({ name: 'Approverdetail', params: row })
    }
  }
}
</script>
<style lang="scss" scope>
    .approver{
        padding:0 20px;
    }
    .butList{
          padding:20px;
          display: flex;
          justify-content: space-between;
          cursor: pointer;
          /*color: #3345ff;*/
          font-size: 16px;
          span{
            display: inline-block;
            position: relative;
            top:-1px;
            text-align: center;
            font-weight: bold;
            margin-right: 2px;
            color:#fff;
            background: #3345ff;
            line-height: 12px;
            height: 14px;
            width: 14px;
            border-radius: 100%;
          }
          .add{
            color: #3345ff;
          }
        }
</style>
